import React from 'react';
import { Modal, Button, Progress } from 'antd';
import { useTranslation } from 'react-i18next';

import styles from './styles.module.less';

const WinningRateModal = ({
  winningRateVisible,
  setWinningRateVisible
}) => {
  const { t } = useTranslation();

  return (
    <Modal
      open={winningRateVisible}
      footer={null}
      onCancel={() => setWinningRateVisible(false)}
      style={{
        minWidth: 950,
      }}
    >
      <div className={styles.winning_rate_modal}>
        <div className={styles.title}>{t('Comprehensive analysis of the winning rate')}：{t('High')}</div>
        <div className={styles.describe}>{t('Based on the comprehensive calculation of your information completeness, please complete it according to the test results and guidelines to improve your bidding success rate')}</div>

        <div className={styles.speed_box}>
          <div className={styles.item_box}>
            <div className={styles.speed}>
              <Progress type="circle" strokeColor='#1890ff' percent={87} width={80} format={(percent) => `${percent}%`} />
            </div>
            <div className={styles.name}>{t('Basic information completeness')}</div>
            <div className={styles.desc}>
              {t('Help the contractor to get to know you more comprehensively')}
            </div>
            <div className={styles.proposal}>
              {t('Please complete to')}
              <span>80%</span>
              {t('or above')}
            </div>
            <div className={styles.option}>
              <Button type='link'>{t('Continue to improve')}</Button>
            </div>
          </div>

          <div className={styles.item_box}>
            <div className={styles.speed}>
              <Progress type="circle" strokeColor='#1890ff' percent={100} width={80} format={(percent) => `${percent}%`} />
            </div>
            <div className={styles.name}>{t('Enterprise Certification')}</div>
            <div className={styles.desc}>
              {t('Build trust and increase your chances of winning a bid')}
            </div>
            <div className={styles.proposal}>
              {t('Please complete it, otherwise it will affect your bidding')}
            </div>
            <div className={styles.option}>
              {/* <Button type='link'>继续完善</Button> */}
            </div>
          </div>

          <div className={styles.item_box}>
            <div className={styles.speed}>
              <Progress type="circle" strokeColor='#1890ff' percent={100} width={80} format={(percent) => `${percent}%`} />
            </div>
            <div className={styles.name}>{t('Mobile phone authentication')}</div>
            <div className={styles.desc}>
              {t('Get the latest news and facilitate cooperation and contact')}
            </div>
            <div className={styles.proposal}>
              {t('Please complete it, otherwise it will affect your bidding')}
            </div>
            <div className={styles.option}>
              {/* <Button type='link'>继续完善</Button> */}
            </div>
          </div>

          <div className={styles.item_box}>
            <div className={styles.speed}>
              <Progress type="circle" strokeColor='#1890ff' percent={88} width={80} format={(percent) => `${percent}%`} />
            </div>
            <div className={styles.name}>{t('Skill Perfection')}</div>
            <div className={styles.desc}>
              {t('Demonstrate your skills and increase your chances of winning the bid')}
            </div>
            <div className={styles.proposal}>
              {t('Please complete to')}
              <span>80%</span>
              {t('or above')}
            </div>
            <div className={styles.option}>
              <Button type='link'>{t('Continue to improve')}</Button>
            </div>
          </div>

          <div className={styles.item_box}>
            <div className={styles.speed}>
              <Progress type="circle" strokeColor='#1890ff' percent={30} width={80} format={(percent) => `${percent}%`} />
            </div>
            <div className={styles.name}>{t('Case Completeness')}</div>
            <div className={styles.desc}>
              {t('Show your project experience and increase your chances of winning the bid')}
            </div>
            <div className={styles.proposal}>
              {t('It is recommended to at least improve')}
              <span>2~3</span>
              {t('Case Studies')}
            </div>
            <div className={styles.option}>
              <Button type='link'>{t('New Cases')}</Button>
            </div>
          </div>
        </div>

        <div className={styles.bottom_box}>
          <Button type="default" style={{ margin: '0 10px' }} onClick={() => setWinningRateVisible(false)}>{t('Completed? Retest')}</Button>
          <Button type="primary" style={{ margin: '0 10px' }} onClick={() => setWinningRateVisible(false)}>{t('Start bidding')}</Button>
        </div>
      </div>
    </Modal>
  )
};

export default WinningRateModal;